<template>
  <view>
    <my-search @click="tiaoss"></my-search>
    <view class="catebox">
      <!-- 左边滚动 区域-->
      <scroll-view scroll-y="true" :style="{height:hs+'px'}" class="left">
        <view :class="['frist',atvite==i? 'atvite':'']" v-for="(item,i) in catelist1" :key="i" @click="dianlfl(i)">{{item.cat_name}}</view>
      </scroll-view>
      <!-- 右边滚动区域 -->
      <scroll-view scroll-y="true"  :style="{height:hs+'px'}" :scroll-top="st">
        <view v-for="(item,index) in catelist2" :key="index" class="rightcate">
          <view class="text">/{{item.cat_name}}/</view>
          <view class="threecate">
            <view class="threeitem" v-for="(item1,i1) in item.children" :key="i1" @click="tiaozgoodlist(item1)">
              <image :src="item1.cat_icon" mode="widthFix"></image>
              <text>{{item1.cat_name}}</text>
            </view>
          </view>
          
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import minbadge from '@/mixins/tabbadge.js'
  export default {
    mixins:['minbadge'],
    data() {
      return {
        //滚动高度
        hs:0,
        //一分类类别
        catelist1:[],
        //二分类别
        catelist2:[],
        //选定标志
        atvite:0,
        //与屏幕顶端的距离
        st:0
        
      };
    },
    onLoad() {
      //获取窗口可以使用的高度
      this.hs=uni.getWindowInfo().windowHeight-50
      //获取分类列表数据
      uni.$getlistdata([uni.url_t.catelist],"catelist1",this).then(res=>{this.catelist2=res[0].children})
    },
    methods:{
      dianlfl(i){
        this.atvite=i
        this.catelist2=this.catelist1[i].children
        this.st=this.st==0 ? 1:0
      },
      tiaozgoodlist(item1){
        uni.navigateTo({
          url:'/subpkg/goods_list/goods_list?cid='+item1.cat_id
        })
      },
      tiaoss(){
        uni.navigateTo({
          url:'/subpkg/search/search'
        })
      }
    }
  }
</script>

<style lang="scss">
.catebox{
  display:flex
}
.left{
  width: 120px;
  .frist{
    line-height: 60px;
    text-align: center;
    background-color: #f7f7f7;
    font-size: 12px;
    &.atvite{
      background-color: white;
      position: relative;
      &::before{
        content: ' ';
        display: block;
        width: 3px;
        height: 30px;
        background-color: red;
        position: absolute;
        top:50%;
        left:0;
        transform: translateY(-50%);
      }
    }
  }
}
.rightcate .text{
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  padding: 15px 0;
}
.threecate{
  display: flex;
  flex-wrap: wrap;
  .threeitem{
    width: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    image{
      width:60px;
      height:60px;
    }
    text{
      font-size: 12px;
      
    }
  }
  
}

</style>
